<template>
  <!--
  <div>
    <h1 class="video-play-icon">用户-首页5</h1>
    <div v-for="item in movieList" :key="item.mov_id">
      <div style="width: 160px; height: 260px; padding: 10px;solid-color: #1d2124;float: left">
        <div>
          <img :src="item.mov_img_path" style="height: 350px；width: 250px">
        </div>
        {{item.mov_name}}<br>
        评分：{{item.mov_score}}<br>
        <div align="center">
          <a-button type="link" danger @click="toTicket(item.mov_id)">购票</a-button>
        </div>
      </div>
    </div>
    <div style="clear: left">

    </div>
  </div>
  -->
  <!-- 自定义部分 -->

  <div>
    <div style="height: 73px"></div>

    <a-carousel autoplay effect="fade">
      <div>
        <img
          src="/src/common/assets/images/R-A.png"
          class="ant-carousel_image_type"
        />
      </div>

      <div>
        <img
          src="/src/common/assets/images/R-B.png"
          class="ant-carousel_image_type"
        />
      </div>
      <div>
        <img
          src="/src/common/assets/images/R-C.png"
          class="ant-carousel_image_type"
        />
      </div>
      <div>
        <img
          src="/src/common/assets/images/R-D.png"
          class="ant-carousel_image_type"
        />
      </div>
    </a-carousel>

    <!-- 三个可动的电影展示-->
    <!-- 4部推荐电影 -->
    <section class="w3l-grids">
      <div class="grids-main py-5">
        <div class="container py-lg-3">
          <div class="headerhny-title">
            <div class="w3l-title-grids">
              <div class="headerhny-left">
                <h3 class="hny-title">热门电影</h3>
              </div>
            </div>

            <div
              class="multi-label-box"
              style="width: 100%; height: 80px; background-color: #f0f0f0d9"
            >
              <div class="multi-label" style="height: 50px">
                <select v-model="movieType" style="font-size: 25px">
                  <option value="">所有类型</option>
                  <option value="动作">动作</option>
                  <option value="喜剧">喜剧</option>
                  <option value="剧情">剧情</option>
                  <option value="科幻">科幻</option>
                  <option value="历史">历史</option>
                  <option value="搞笑">搞笑</option>
                  <option value="传记">爱情</option>
                  <!-- 添加其他电影类型 -->
                </select>
              </div>
              <div class="multi-label" style="height: 50px">
                <select v-model="movieSort" style="font-size: 25px">
                  <option value="">按照评分排序</option>
                  <option value="升序">升序</option>
                  <option value="降序">降序</option>
                </select>
              </div>
            </div>
          </div>
          <div class="w3l-populohny-grids">
            <!--  动态电影 -->
            <div v-for="item in movieList" :key="item.mov_id">
              <div class="item vhny-grid">
                <div class="box16">
                  <!--  动态电影链接，链接到介绍页面 -->
                  <a @click="toTicket(item.mov_id)">
                    <figure>
                      <img
                        class="img-fluid"
                        :src="item.mov_img_path"
                        style="max-height: 350px; max-width: 250px"
                        alt=""
                      />
                    </figure>
                    <div class="box-content">
                      <h3 class="title">{{ item.mov_name }}</h3>
                    </div>
                    <span
                      class="fa fa-play video-icon"
                      aria-hidden="true"
                    ></span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 4部推荐电影 -->
    <!-- 电影类型 -->
    <section class="w3l-albums py-5" id="projects" style="display: none">
      <div class="container py-lg-4">
        <div class="row">
          <div class="col-lg-12 mx-auto">
            <!--Horizontal Tab-->
            <div id="parentHorizontalTab">
              <!-- <ul class="resp-tabs-list hor_1">
							<li>Recent Movies</li>
							<li>Popular Movies</li>
							<li>Trend Movies</li>
							<div class="clear"></div>
						</ul>  可以加界面 -->
              <div class="resp-tabs-container hor_1">
                <!-- 第一界面 -->
                <div class="albums-content">
                  <div class="row">
                    <!--/set1-->
                    <div class="col-lg-4 new-relise-gd mt-lg-0 mt-0">
                      <div class="slider-info">
                        <div class="img-circle">
                          <a href="genre.html">
                            <!--img src="../images/m6.jpg" class="img-fluid"
														alt="author image"-->
                            <div class="overlay-icon">
                              <span
                                class="fa fa-play video-icon"
                                aria-hidden="true"
                              ></span>
                            </div>
                          </a>
                        </div>
                        <div class="message">
                          <p>English</p>
                          <a class="author-book-title" href="genre.html"
                            >漫长的过程</a
                          >
                          <h4>
                            <span class="post"
                              ><span class="fa fa-clock-o"> </span> 2 Hr 4min
                            </span>

                            <span class="post fa fa-heart text-right"></span>
                          </h4>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4 new-relise-gd mt-lg-0 mt-0">
                      <div class="slider-info">
                        <div class="img-circle">
                          <!--a href="genre.html"><img src="../images/m5.jpg" class="img-fluid"
														alt="author image">
													<div class="overlay-icon">

														<span class="fa fa-play video-icon" aria-hidden="true"></span>
													</div>
												</a-->
                        </div>
                        <div class="message">
                          <p>English</p>
                          <a class="author-book-title" href="genre.html"
                            >Jumanji</a
                          >
                          <h4>
                            <span class="post"
                              ><span class="fa fa-clock-o"> </span> 2 Hr 4min
                            </span>

                            <span class="post fa fa-heart text-right"></span>
                          </h4>
                        </div>
                      </div>
                    </div>
                    <!--//set1-->
                    <!--/set1-->
                    <div class="col-lg-4 new-relise-gd mt-lg-0 mt-0">
                      <div class="slider-info">
                        <div class="img-circle">
                          <!--a href="genre.html"><img src="../images/m1.jpg" class="img-fluid"
														alt="author image">
													<div class="overlay-icon">

														<span class="fa fa-play video-icon" aria-hidden="true"></span>
													</div>
												</a-->
                        </div>
                        <div class="message">
                          <p>English</p>
                          <a class="author-book-title" href="genre.html"
                            >Rocketman</a
                          >
                          <h4>
                            <span class="post"
                              ><span class="fa fa-clock-o"> </span> 2 Hr 4min
                            </span>

                            <span class="post fa fa-heart text-right"></span>
                          </h4>
                        </div>
                      </div>
                    </div>
                    <!--//set1-->
                  </div>
                </div>
                <!-- 第一界面 -->
                <!-- 第二界面 -->
                <div class="albums-content">
                  <div class="row">
                    <!--/上面这两个用于设置界面，保证横板排布-->
                    <div class="col-lg-4 new-relise-gd mt-lg-0 mt-0">
                      <div class="slider-info">
                        <div class="img-circle">
                          <!--a href="genre.html"><img src="../images/m1.jpg" class="img-fluid"
														alt="author image">
													<div class="overlay-icon">

														<span class="fa fa-play video-icon" aria-hidden="true"></span>
													</div>
												</a-->
                        </div>
                        <div class="message">
                          <p>English</p>
                          <a class="author-book-title" href="genre.html"
                            >Rocketman</a
                          >
                          <h4>
                            <span class="post"
                              ><span class="fa fa-clock-o"> </span> 2 Hr 4min
                            </span>

                            <span class="post fa fa-heart text-right"></span>
                          </h4>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4 new-relise-gd mt-lg-0 mt-0">
                      <div class="slider-info">
                        <div class="img-circle">
                          <!--a href="genre.html"><img src="../images/m2.jpg" class="img-fluid"
														alt="author image">
													<div class="overlay-icon">

														<span class="fa fa-play video-icon" aria-hidden="true"></span>
													</div>
												</a-->
                        </div>
                        <div class="message">
                          <p>English</p>
                          <a class="author-book-title" href="genre.html"
                            >Doctor Sleep</a
                          >
                          <h4>
                            <span class="post"
                              ><span class="fa fa-clock-o"> </span> 2 Hr 4min
                            </span>

                            <span class="post fa fa-heart text-right"></span>
                          </h4>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4 new-relise-gd mt-lg-0 mt-0">
                      <div class="slider-info">
                        <div class="img-circle">
                          <!--a href="genre.html"><img src="../images/m3.jpg" class="img-fluid"
														alt="author image">
													<div class="overlay-icon">

														<span class="fa fa-play video-icon" aria-hidden="true"></span>
													</div>
												</a-->
                        </div>
                        <div class="message">
                          <p>English</p>
                          <a class="author-book-title" href="genre.html"
                            >Knives Out</a
                          >
                          <h4>
                            <span class="post"
                              ><span class="fa fa-clock-o"> </span> 2 Hr 4min
                            </span>

                            <span class="post fa fa-heart text-right"></span>
                          </h4>
                        </div>
                      </div>
                    </div>
                    <!--//set1-->
                  </div>
                </div>
                <!-- 第二界面 -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 电影类型 -->
    <!-- 底部导航栏 -->
    <div class="w3l-footer">
      <section class="footer-inner-main">
        <div class="footer-hny-grids py-5" style="display: none">
          <div class="container py-lg-4">
            <div class="text-txt">
              <div class="right-side">
                <!--div class="row footer-about">
								<div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
									<a href="genre.html"><img class="img-fluid" src="../images/banner1.jpg"
											alt=""></a>
								</div>
								<div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
									<a href="genre.html"><img class="img-fluid" src="../images/banner2.jpg"
											alt=""></a>
								</div>
								<div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
									<a href="genre.html"><img class="img-fluid" src="../images/banner3.jpg"
											alt=""></a>
								</div>
								<div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
									<a href="genre.html"><img class="img-fluid" src="../images/banner4.jpg"
											alt=""></a>
								</div>
							</div-->
                <div class="row footer-links">
                  <div class="col-md-3 col-sm-6 sub-two-right mt-5">
                    <h6>电影</h6>
                    <ul>
                      <li><a href="#">电影</a></li>
                      <li><a href="#">预告片</a></li>
                      <li><a href="#">制片人</a></li>
                      <li><a href="#">演员</a></li>
                      <li><a href="#">放映厅</a></li>
                      <li><a href="contact.html">联系我们</a></li>
                    </ul>
                  </div>
                  <div class="col-md-3 col-sm-6 sub-two-right mt-5">
                    <h6>导航</h6>
                    <ul>
                      <li><a href="index.html">首页</a></li>
                      <li><a href="about.html">电影详情</a></li>
                      <li><a href="#">榜单</a></li>
                      <li><a href="#">电影院</a></li>
                      <li><a href="#">注册页面</a></li>
                      <li><a href="contact.html">影院联系</a></li>
                    </ul>
                  </div>
                  <div class="col-md-3 col-sm-6 sub-two-right mt-5">
                    <h6>位置</h6>
                    <ul>
                      <li><a href="genre.html">Asia</a></li>
                      <li><a href="genre.html">France</a></li>
                      <li><a href="genre.html">Taiwan</a></li>
                      <li><a href="genre.html">United States</a></li>
                      <li><a href="genre.html">Korea</a></li>
                      <li><a href="genre.html">United Kingdom</a></li>
                    </ul>
                  </div>
                  <div class="col-md-3 col-sm-6 sub-two-right mt-5">
                    <h6>邮件</h6>
                    <form action="#" class="subscribe mb-3" method="post">
                      <input
                        type="email"
                        name="email"
                        placeholder="您的电子邮箱地址"
                        required=""
                      />
                      <button><span class="fa fa-envelope-o"></span></button>
                    </form>
                    <p>
                      输入您的电子邮件，并从我们那里接收最新消息、更新和特别优惠。
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="below-section">
          <div class="container">
            <div class="copyright-footer">
              <div class="columns text-lg-left">
                <p>Copyright &copy; 2020.Company name All rights reserved.</p>
              </div>

              <!-- <ul class="social text-lg-right">
							<li><a href="#facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
							</li>
							<li><a href="#linkedin"><span class="fa fa-linkedin" aria-hidden="true"></span></a>
							</li>
							<li><a href="#twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
							</li>
							<li><a href="#google"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
							</li>

						</ul> -->
            </div>
          </div>
        </div>
        <!-- copyright -->
        <!-- move top -->
        <button onclick="topFunction()" id="movetop" title="Go to top">
          <span class="fa fa-arrow-up" aria-hidden="true"></span>
        </button>
        <!-- /move top -->
      </section>
    </div>
    <!--//底部导航栏 -->
    <!-- 可用影片形式，不显示 -->
    <section class="w3l-albums py-5" id="projects" style="display: none">
      <div class="container py-lg-4">
        <div class="row">
          <div class="col-lg-12 mx-auto">
            <div id="parentHorizontalTab">
              <div class="resp-tabs-container hor_1">
                <div class="albums-content">
                  <div class="row">
                    <!-- 模板 -->
                    <div class="col-lg-4 new-relise-gd mt-lg-0 mt-0">
                      <div class="slider-info">
                        <div class="img-circle">
                          <!--a href="genre.html"><img src="../images/m3.jpg" class="img-fluid"
														alt="author image">
						<div class="overlay-icon">
                             <span class="fa fa-play video-icon" aria-hidden="true"></span>
						</div>
						</a-->
                        </div>
                        <div class="message">
                          <p>English</p>
                          <a class="author-book-title" href="genre.html"
                            >Knives Out</a
                          >
                          <h4>
                            <span class="post"
                              ><span class="fa fa-clock-o"> </span> 2 Hr
                              4min</span
                            >
                            <span class="post fa fa-heart text-right"></span>
                          </h4>
                        </div>
                      </div>
                    </div>
                    <!-- 模板 -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";

import { get } from "@/common";

const router = useRouter();

const movieList = ref([]);

const movieType = ref("");
const movieSort = ref("");

const getMovies = (movieType) => {
  if (!movieType) {
    console.log("没有type");
    //movieList.value = "";
    get("/info/movie/movie-list").then((res) => {
      movieList.value = res.data;
    });
  } else {
    console.log(movieType);
    get("/info/movie/movie-list/bylabel", { label: movieType }).then((res) => {
      //movieList.value = "";
      movieList.value = res.data;
      console.log("有type");
    });
  }
};
getMovies();
const getMoviesByScore = (movieSort) => {
  if (movieSort == "升序") {
    movieList.value.sort((a, b) => a.mov_score - b.mov_score);
  } else if (movieSort == "降序") {
    movieList.value.sort((a, b) => b.mov_score - a.mov_score);
  }
};
watch(movieType, (newType) => {
  getMovies(newType);
  movieSort.value = "";
});
watch(movieSort, (newSort) => {
  getMoviesByScore(newSort);
});

const toTicket = (id) => {
  router.push({ path: "/home/cust_ticket", query: { mov_id: id } });
};
</script>

<style scope>
@import "../css/cinema.css";
@import "../css/style-starter.css";
@import "../css/base.css";
@import "../css/bootstrap-grid.css";
</style>
<style scoped>
/* For demo */
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 500px;
  line-height: 500px;
  background: rgb(255, 255, 255);
  overflow: hidden;
}
.ant-carousel_image_type {
  max-height: 500px;
  line-height: 500px;
  min-height: 500px;
  width: 1110px;
  overflow: hidden;
  margin: auto;
}
select {
  display: inline-block;
  margin: 5px 0;
  width: 200px;
  font-family: Arial, sans-serif; /* 更改字体类型 */
  color: #333; /* 更改字体颜色 */
  font-weight: bold; /* 更改字体粗细 */
  margin-top: 10px;
  background-color: #f0f0f0; /* 更改背景颜色 */
  border: 1px solid #ccc; /* 更改边框样式和颜色 */
  border-radius: 5px; /* 圆角边框 */
}
.multi-label {
  display: inline-block;
  height: 50px;
  width: 300px;
}
.multi-label-box {
  display: flex;
  height: 80px;
  width: 100%;
  align-items: center; /* 垂直居中 */
}
</style>
